//数据渲染 dataRendering
//
window.addEventListener("DOMContentLoaded", function () {
    //获取 json
    let url = location.pathname.substring(1).split('.')[0];

    //定义 总数据 变量
    let data, dataNum;

    // console.log(url);
    $.ajax({
        url: 'json/' + url + '.json',   //url  :请求地址 
        type: 'get',                        //type ：请求类型
        data: {},                        //data ：发送给服务器的数据
        async: false,
        dataType: 'json',                    //!--dataType:返回的数据类型
        success: function (datajson) {//<!--回调函数 -->      
            // 调用方法 传入数据 
            //getData(datajson);
            data = datajson;
        }
    });//$.ajax
    // 在ajax中添加async : false,将ajax异步请求关闭。(默认是异步请求)
    // console.log(a);
    // let data = sdata;
    dataNum = data.length;

    let data_total = data.length;//总数据条数
    // console.log(data);
    //搜索按钮
    document.querySelector('#btn_search').addEventListener('click', function (e) {
        // //
        $.ajax({
            url: 'json/' + url + '.json',   //url  :请求地址 
            type: 'get',                        //type ：请求类型
            data: {},                        //data ：发送给服务器的数据
            async: false,
            dataType: 'json',                    //!--dataType:返回的数据类型
            success: function (datajson) {//<!--回调函数 -->      
                // 调用方法 传入数据 
                //getData(datajson);
                data = datajson;
            }
        });//$.ajax
        //
        dataInquire(data);
        data = dataInquire(data);
        //
        data_total = data.length;//总数据条数
        //
        load(data);
    });

    // getData(data);
    //所有数据内容
    // function getData(data) {
    // console.log(data);
    //获取数据容器tbody-list
    let tbodylist = document.querySelector('#tbody-list');
    // //页数
    let pageNumber;

    // let data_total = data.length;//总数据条数

    // console.log(data_total + '条数');

    //分页内容容器
    let pagination = document.querySelector('.pagination');
    //当前选择页数
    // let checkedPage = 1; 

    //分页条数选择器
    let page_select = document.querySelector('#page_select');
    //根据条数分页
    let dataNumber = page_select[page_select.selectedIndex].text; //加载条数

    //当前页面location.pathname 地址
    let pathname = location.pathname;
    // console.log(pathname);

    //条数改变
    page_select.addEventListener('change', function (e) {
        dataNumber = page_select[page_select.selectedIndex].text; //条数重新赋值
        // 渲染 调用
        //初始化渲染 调用方法
        load(data);

    });//page_select.addEventListener('change'

    //加载分页 方法
    function paginationFn() {
        // //清空分页再重新渲染
        pagination.innerHTML = '';//分页内容容器

        //该分的页数 ceil 取整
        pageNumber = Math.ceil(data.length / dataNumber);
        //每页加载数据条数 dataNumber
        //分页
        //总数据条数
        document.querySelector('#page_total').innerHTML = `共<span class="label label-danger">${data_total}</span>条记录`;
        //首页标签
        let frontPage = document.createElement('li');
        frontPage.innerHTML = `<a href="javascript:void(0);">
                        <span>首页</span>
                    </a>`;
        pagination.append(frontPage);
        //
        frontPage.setAttribute('class', 'disabled');
        //上一页标签
        let lastPage = document.createElement('li');
        lastPage.innerHTML = `<a href="javascript:void(0);">
                                    <span>上一页</span>
                                </a>`;
        pagination.append(lastPage);
        //
        lastPage.setAttribute('class', 'disabled');
        //分页数值1-n
        for (let index = 1; index <= pageNumber; index++) {
            //分页列表
            let page_li = document.createElement('li');
            page_li.innerHTML = `<a href="javascript:void(0);">
                                    <span>${index}</span>
                                </a>`;
            pagination.append(page_li);
            //页数添加class = 'pageNumber';
            page_li.setAttribute('class', 'pageNumber');
            //默认选中第一页
            let tf = true;
            if (tf) {
                if (index == 1) {
                    page_li.classList.add('active');
                }
                tf = false;
            }
        }
        //下一页标签
        let nextPage = document.createElement('li');
        nextPage.innerHTML = `<a href="javascript:void(0);">
                                <span>下一页</span>
                            </a> `;
        pagination.append(nextPage);
        //尾页标签
        let footer = document.createElement('li');
        footer.innerHTML = `<a href="javascript:void(0);">
                             <span>尾页</span>
                            </a>`;
        pagination.append(footer);

        //
    }//加载分页 方法

    // console.log(data);

    //加载数据 方法
    function downloadData(checkedPage = 1, data) {
        //清空数据再重新渲染
        tbodylist.innerHTML = '';//数据容器tbody-list
        //数据列表加载
        //数据渲染
        //循环渲染 其长度下标控制，当前页数(checkedPage) * 每页条数(dataNumber)
        let datalength = checkedPage * dataNumber;
        let startIndex = checkedPage * dataNumber - dataNumber;//startIndex 数据加载起始位置
        //循环不超过数据总条数
        if (datalength > data.length) datalength = data.length;
        //
        for (let index = startIndex; index < datalength; index++) {
            //index <= 当前页数(checkedPage) * 每页条数(dataNumber)
            // console.log(dataNumber);
            //创建数据结构
            let trKey = document.createElement('tr');

            //不同页面不同加载渲染
            if (pathname == '/dormAdminManager.html') {
                //宿舍管理员管理  数据渲染
                dormAdminManager(trKey, index, data);

            } else if (pathname == '/stuManagement.html') {
                //学生管理 数据渲染
                stuManagement(trKey, index, data);

            } else if (pathname == '/dormManagement.html') {
                //宿舍楼管理 数据渲染
                dormManagement(trKey, index, data);

            } else if (pathname == '/absence.html') {
                //缺勤记录 数据渲染
                absence(trKey, index, data)
            }
            //
            tbodylist.append(trKey);
            //给予列表行 id
            trKey.setAttribute('id', data[index].id);
        }

    }//加载数据 方法

    //dormAdminManager 宿舍管理员管理  数据渲染
    function dormAdminManager(trKey, index, data) {
        let arr = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
        return trKey.innerHTML = `
                <td class="text-center"><input class="checkbox-inline" type="checkbox"
                name="cb_select"></td>
                <td class="text-center"><span>${data[index].id}</span></td>
                <td class="text-center"><span>${data[index].username}</span></td>
                <td class="text-center">${data[index].gender == 0 ? '女' : '男'}</td>
                <td class="text-center"><span>${data[index].phone}</span></td>
                <td class="text-center">第${arr[data[index].dormId]}宿舍楼</td>
                <td class="text-center"><span>${data[index].account}</span></td>
                <td class="text-center">
                    <div class="btn-group" role="group">
                        <button type="button" name="btn_edit" class="btn btn-primary">修改</button>
                        <button type="button" name="btn_del" class="btn btn-danger">删除</button>
                    </div>
                </td> 
            `;
    }//宿舍管理员管理  数据渲染

    //stuManagement 学生管理 数据渲染
    function stuManagement(trKey, index, data) {
        let arr = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
        return trKey.innerHTML = `
                <td class="text-center"><input class="checkbox-inline" type="checkbox"
                        name="cb_select"></td>
                <td class="text-center"><span>${data[index].id}</span></td>
                <td class="text-center"><span>${data[index].code}</span></td>
                <td class="text-center"><span>${data[index].sname}</span></td>
                <td class="text-center">${data[index].gender == 0 ? '女' : '男'}</td>
                <td class="text-center"><span>${data[index].phone}</span></td>
                <td class="text-center">第${arr[data[index].dormId]}宿舍楼</td>
                <td class="text-center"><span>${data[index].roomId}</span></td>
                <td class="text-center">
                    <div class="btn-group" role="group">
                        <button type="button" name="btn_edit" class="btn btn-primary">修改</button>
                        <button type="button" name="btn_del" class="btn btn-danger">删除</button>
                    </div>
                </td>
            `;

    }//学生管理 数据渲染

    //dormManagement 宿舍楼管理 数据渲染
    function dormManagement(trKey, index, data) {
        let arr = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
        return trKey.innerHTML = `
                <td class="text-center"><input class="checkbox-inline" type="checkbox"
                        name="cb_select"></td>
                <td class="text-center"><span>${data[index].id}</span></td>
                <td class="text-center"><span>${data[index].name}</span></td>
                <td class="text-center"><span>${data[index].intro}</span></td>
                <td class="text-center">
                        ${data[index].administrator}
                </td>
                <td class="text-center">
                    <div class="btn-group" role="group">
                        <button type="button" name="btn_edit" class="btn btn-primary">修改</button>
                        <button type="button" name="btn_del" class="btn btn-danger">删除</button>
                    </div>
                </td>
            `;
    }//宿舍楼管理 数据渲染

    //absence  缺勤记录 数据渲染
    function absence(trKey, index, data) {
        let arr = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
        return trKey.innerHTML = `
                <td class="text-center"><input class="checkbox-inline" type="checkbox"
                        name="cb_select"></td>
                <td class="text-center"><span>${data[index].id}</span></td>
                <td class="text-center">${data[index].code}</td>
                <td class="text-center">${data[index].sname}</td>
                <td class="text-center">第${arr[data[index].dormId]}宿舍楼</td>
                <td class="text-center">${data[index].roomId}</td>
                <td class="text-center"><span>${data[index].createDate}</span></td>
                <td class="text-center"><span>${data[index].remark}</span></td>
                <td class="text-center">
                    <div class="btn-group" role="group">
                        <button type="button" name="btn_del" class="btn btn-danger">删除</button>
                    </div>
                </td>
            `;
    }//缺勤记录 数据渲染

    //切换分页 方法
    function pageClick() {
        //页数点击
        let numberpage = 1;
        //
        let pageNumeburLis = document.querySelectorAll('.pagination > li');
        //
        for (let index = 2; index < pageNumeburLis.length - 2; index++) {
            //
            pageNumeburLis[index].addEventListener('click', function (event) {
                //
                for (let index1 = 2; index1 < pageNumeburLis.length - 2; index1++) {
                    pageNumeburLis[index1].setAttribute('class', 'pageNumber');
                }
                this.classList.add('active');
                numberpage = parseInt(this.querySelector('a > span').innerHTML);

                //调用方法
                downloadData(numberpage, data);//加载数据
                //单选框 全选框
                chooseChange();////负责表格选择
                //
                //调用 判断首尾页、上下页 是否禁用 方法
                pagenumberDisable(numberpage);
            });
        }
        //首页
        pageNumeburLis[0].addEventListener('click', function (e) {
            downloadData(1, data);//加载数据
            for (let index1 = 2; index1 < pageNumeburLis.length - 2; index1++) {
                pageNumeburLis[index1].setAttribute('class', 'pageNumber');
            }
            pageNumeburLis[2].classList.add('active');
            //

            //调用 判断首尾页、上下页 是否禁用 方法
            pagenumberDisable(1);

            //单选框 全选框
            chooseChange();////负责表格选择
        });
        //上一页
        pageNumeburLis[1].addEventListener('click', function (e) {
            //
            for (let index = 2; index < pageNumeburLis.length - 2; index++) {
                if (pageNumeburLis[index].className == 'pageNumber active') {
                    numberpage = parseInt(pageNumeburLis[index].querySelector('a> span').innerHTML);
                }
            }
            //调用 判断首尾页、上下页 是否禁用 方法
            pagenumberDisable((numberpage - 1) > 1 ? numberpage - 1 : 1);
            // console.log(numberpage);

            //
            if (numberpage > 1) {//判断边界
                downloadData(numberpage - 1, data);//加载数据
                for (let index1 = 2; index1 < pageNumeburLis.length - 2; index1++) {
                    pageNumeburLis[index1].setAttribute('class', 'pageNumber');
                }
                pageNumeburLis[numberpage].classList.add('active');
            }


            //单选框 全选框
            chooseChange();////负责表格选择

        });
        //尾页
        pageNumeburLis[pageNumeburLis.length - 1].addEventListener('click', function (e) {
            // 
            //调用 判断首尾页、上下页 是否禁用 方法
            pagenumberDisable(pageNumber);
            // console.log(pageNumber);

            //
            downloadData(pageNumber, data);//加载数据
            for (let index1 = 2; index1 < pageNumeburLis.length - 2; index1++) {
                pageNumeburLis[index1].setAttribute('class', 'pageNumber');
            }
            pageNumeburLis[pageNumeburLis.length - 3].classList.add('active');


            //单选框 全选框
            chooseChange();////负责表格选择
        });
        //下一页
        pageNumeburLis[pageNumeburLis.length - 2].addEventListener('click', function (e) {
            //
            for (let index = 2; index < pageNumeburLis.length - 2; index++) {
                if (pageNumeburLis[index].className == 'pageNumber active') {
                    numberpage = parseInt(pageNumeburLis[index].querySelector('a > span').innerHTML);
                }
            }
            // console.log(numberpage);
            //调用 判断首尾页、上下页 是否禁用 方法
            pagenumberDisable((numberpage + 1) < pageNumber ? numberpage + 1 : pageNumber);
            //
            if (numberpage < pageNumber) {//判断边界
                //
                downloadData(numberpage + 1, data);//加载数据
                for (let index1 = 2; index1 < pageNumeburLis.length - 2; index1++) {
                    pageNumeburLis[index1].setAttribute('class', 'pageNumber');
                }
                pageNumeburLis[numberpage + 2].classList.add('active');
            }


            //单选框 全选框
            chooseChange();////负责表格选择

        });
    }//切换分页 方法

    //判断首尾页、上下页 是否禁用 方法
    function pagenumberDisable(page = 1) {
        //
        let pageNumeburLis = document.querySelectorAll('.pagination > li');
        //
        pageNumeburLis[0].removeAttribute('class', 'disabled');
        pageNumeburLis[1].removeAttribute('class', 'disabled');
        //
        pageNumeburLis[pageNumeburLis.length - 1].removeAttribute('class', 'disabled');
        pageNumeburLis[pageNumeburLis.length - 2].removeAttribute('class', 'disabled');
        // pageNumeburLis[0].classList.add('disabled');
        // pageNumeburLis[1].classList.add('disabled');
        if (page == 1) {
            pageNumeburLis[0].classList.add('disabled');
            pageNumeburLis[1].classList.add('disabled');
        }
        if (pageNumber == 1) {
            pageNumeburLis[0].classList.add('disabled');
            pageNumeburLis[1].classList.add('disabled');
            pageNumeburLis[pageNumeburLis.length - 1].classList.add('disabled');
            pageNumeburLis[pageNumeburLis.length - 2].classList.add('disabled');
        }
        if (pageNumber == page) {
            pageNumeburLis[pageNumeburLis.length - 1].classList.add('disabled');
            pageNumeburLis[pageNumeburLis.length - 2].classList.add('disabled');
        }

    }

    //加载宿舍楼选择列表 方法
    function downloadFloor() {
        //不同页面不同加载渲染
        if (pathname == '/dormAdminManager.html') {
            //宿舍管理员管理  数据渲染 加载宿舍楼列表
            fll();
        } else if (pathname == '/stuManagement.html') {
            //学生管理 数据渲染 加载宿舍楼列表
            fll();
        }
        //
        function fll() {
            let floorList = document.querySelector('#dormId');
            //清空重载
            floorList.innerHTML = '';
            floorList.innerHTML += `<option value="-1">请选择宿舍楼</option>`;
            //
            for (let index = 0; index < floor.length; index++) {
                floorList.innerHTML += `<option value="${index + 1}">${floor[index]}</option>`;
            }
        }

    }//加载宿舍楼选择列表 方法

    //负责表格选择 方法
    function chooseChange() {
        //全选框
        let selectAll = document.querySelector('.panel-body input[type="checkbox"]');
        //单选框数组
        let singleBoxs = document.querySelectorAll('#tbody-list tr');
        //初始化全选框
        selectAll.checked = false;
        //
        selectAll.addEventListener("change", function () {
            for (let index = 0; index < singleBoxs.length; index++) {
                singleBoxs[index].querySelector('input[type="checkbox"]').checked = this.checked;
            }
        });

        let selectAllTF;
        for (let index = 0; index < singleBoxs.length; index++) {
            singleBoxs[index].addEventListener("change", function () {
                selectAllTF = 0;
                for (let index1 = 0; index1 < singleBoxs.length; index1++) {
                    if (singleBoxs[index1].querySelector('input[type="checkbox"]').checked == false) {
                        selectAllTF -= 1;
                    } else {
                        selectAllTF += 1;
                    }
                }
                //
                if (selectAllTF != singleBoxs.length) {
                    selectAll.checked = false;
                } else {
                    selectAll.checked = true;
                }

            });

        }

    }//负责表格选择 方法

    //初始化各方法 的方法
    function load(data) {
        //初始化渲染 调用方法
        downloadData(1, data);//加载数据
        paginationFn(data);//分页
        pageClick();//切换分页
        downloadFloor();//加载宿舍楼选择列表
        //单选框 全选框
        chooseChange();////负责表格选择
        //
        pagenumberDisable();

    }

    //基础初始
    load(data);
    // console.log(data);

    //////////////////////////////////////////////////////////
    //数据 增删改  dataOperation数据操作
    function dataOperation() {
        //不同页面的 增删改查  --分别调用方法
        let pathname = location.pathname; //当前页面url
        if (pathname == '/dormAdminManager.html') {
            //宿舍管理员管理
            dataOperationAdd('pageA');//==》添加
            //
            batchDeletion();//==》批量删除
            //
            update();//==》数据修改 删除


        } else if (pathname == '/stuManagement.html') {
            //学生管理
            dataOperationAdd('pageB');//==》添加
            //
            batchDeletion();//==》批量删除
            //
            update();//==》数据修改 删除

        } else if (pathname == '/dormManagement.html') {
            //宿舍楼管理
            dataOperationAdd('pageC');//==》添加
            //
            batchDeletion();//==》批量删除
            //
            update();//==》数据修改 删除

        } else if (pathname == '/absence.html') {
            //缺勤记录
            //无添加
            //
            batchDeletion();//==》批量删除
            //
            update();//==》数据修改 删除

        }

        //添加
        function dataOperationAdd(page) {
            //获取添加按钮
            let addBtn = document.querySelector('#btn_add');
            addBtn.addEventListener('click', function () {
                //添加按钮 --开关  disabled true 禁用
                this.setAttribute('disabled', true);//点击一次 禁用按钮
                //
                //获取当前分页数
                //let checkedPageNumber = parseInt(document.querySelector('.pagination li[class *= active] >a > span').innerHTML);
                //数据列表框
                let tbody_list = document.querySelector('#tbody-list');
                //创建 添加行 节点
                let addRow = document.createElement('tr');
                //pageA 宿舍管理员管理
                if (page == 'pageA') addRow.innerHTML = `
                            <td><input class="checkbox-inline" type="checkbox" name="cb_select"></td>
                            <td></td>
                            <td><input class="form-control" autofocus="autofocus" type="text" name="username" value=""></td>
                            <td>
                                <select class="form-control" name="gender" style="width: 70px;">
                                    <option value="0">女</option>
                                    <option value="1">男</option>
                                </select>
                            </td>
                            <td><input class="form-control" type="phone" name="phone" value=""></td>
                            <td><select class = "dormId" name="dormId" style="width: 130px;" class="form-control">
                                </select></td>
                            <td><input class="form-control" type="text" name="account" value=""></td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button type="button" name="btn_save" class="btn btn-primary">保存</button>
                                    <button type="button" name="btn_cancel" class="btn btn-danger">取消</button>
                                </div>
                            </td>
                        `;
                //pageB 学生管理
                if (page == 'pageB') addRow.innerHTML = `
                            <td><input class="checkbox-inline" type="checkbox" name="cb_select"></td>
                            <td></td>
                            <td></td>
                            <td><input class="form-control" autofocus="autofocus" type="text" name="sname" value=""></td>
                            <td>
                                <select class="form-control" name="gender" style="width: 70px;">
                                    <option value="0">女</option>
                                    <option value="1">男</option>
                                </select>
                            </td>
                            <td><input class="form-control" type="phone" name="phone" value=""></td>
                            <td><select name="dormId" class="dormId" style="width: 130px;" class="form-control">
                                </select></td>
                            <td><input class="form-control" type="text" name="roomId" value=""></td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button type="button" name="btn_save" class="btn btn-primary">保存</button>
                                    <button type="button" name="btn_cancel" class="btn btn-danger">取消</button>
                                </div>
                            </td>
                        `;
                //
                if (page == 'pageC') addRow.innerHTML = `
                            <td><input class="checkbox-inline" type="checkbox" name="cb_select"></td>
                            <td></td>
                            <td><input class="form-control" autofocus="autofocus" type="text" name="name" value=""></td>
                            <td><input class="form-control" type="text" name="intro" value=""></td>
                            <td>
                            <span class="dormId" hidden>
                            </span>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button type="button" name="btn_save" class="btn btn-primary">保存</button>
                                    <button type="button" name="btn_cancel" class="btn btn-danger">取消</button>
                                </div>
                            </td>
                        `;
                tbody_list.append(addRow);
                //为add行 添加 class 类名
                addRow.classList.add('btn-group-add');
                //宿舍楼选择渲染
                fllR();
                //
                // document.querySelector('#tbody-list .btn-group-add td input[type="text"]')
                //add 后 行 操作
                let operateBtns = document.querySelector('#tbody-list .btn-group-add td .btn-group');//按钮组
                operateBtns.addEventListener('click', function (e) {
                    // console.log(e.target.name); btn_save保存  btn_cancel取消
                    //确认修改 --- 保存
                    if (e.target.name == 'btn_save') {
                        //保存
                        addBtn.removeAttribute('disabled');//点击一次 启用addBtn
                        //==============================================================================
                        //==============================================================================
                        //数据添加操作









                        //(数据添加后操作 也许得调用加载 重绘数据)



                        //移除 add 行
                        document.querySelector('#tbody-list .btn-group-add').remove();

                        //取消修改 --- 取消
                    } else if (e.target.name == 'btn_cancel') {
                        //取消
                        addBtn.removeAttribute('disabled');//点击一次 启用addBtn
                        //移除 add 行
                        document.querySelector('#tbody-list .btn-group-add').remove();
                    }
                });

            });
        }
        //添加 行 宿舍楼渲染加载
        function fllR() {
            let floorList = document.querySelector('.dormId');
            //清空重载
            floorList.innerHTML = '';
            floorList.innerHTML += `<option value="-1">请选择宿舍楼</option>`;
            //
            for (let index = 0; index < floor.length; index++) {
                floorList.innerHTML += `<option value="${index + 1}">${floor[index]}</option>`;
            }
        }

        //批量删除
        function batchDeletion() {
            //获取批量删除按钮
            let btn_del_batch = document.querySelector('#btn_del_batch');
            // console.log(btn_del_batch);
            btn_del_batch.addEventListener('click', function () {
                //得到所有 行 子项
                let trLists = document.querySelectorAll('#tbody-list tr');
                // console.log(trLists);
                //判断选中项是否为空
                let chec = 0;
                //
                for (let i = 0; i < trLists.length; i++) {
                    if (trLists[i].children[0].querySelector('input').checked) {
                        chec += 1;//
                        //checked  true 选中 删除
                        //===========================================================
                        //===========================================================
                        //相关删除操作


                        //页面简单移除（暂用）
                        trLists[i].remove();
                        ////////////////////////////////
                        //删除后 调用事件 数据重绘
                        //
                        //

                    };

                }
                //
                if (chec == 0) {
                    //无选中项 提示
                    alert('请选择需要删除的项！')
                }

            });
        }

        //数据修改 删除
        function update() {
            //获取数据区域
            let tbody_list = document.querySelector('#tbody-list');

            // 点击事件
            tbody_list.addEventListener('click', function (e) {
                // console.log(e.target.tagName);
                //判断点击是否为 button 按钮
                if (e.target.tagName == 'BUTTON') {
                    // console.log(e.target.name); // 判断具体按钮 (修改 btn_edit)  (删除 btn_del) (保存 btn_save) (取消 btn_cancel)
                    //得到当前行 所有子项
                    let thisChilds = e.target.parentElement.parentElement.parentElement.children;
                    //得到所有修改按钮
                    let btn_edits = document.querySelectorAll('#tbody-list tr td div button[name="btn_edit"]');
                    // console.log(btn_edits);
                    //修改
                    if (e.target.name == 'btn_edit') {//修改按钮点击
                        // console.log(e.target.parentElement.parentElement.parentElement.children)
                        //禁用非 当前 修改按钮
                        for (const i of btn_edits) {
                            i.setAttribute('disabled', 'disabled');
                        }
                        //
                        //不同页面的 删 改  相应操作不同
                        let pathname = location.pathname; //当前页面url
                        if (pathname == '/dormAdminManager.html') {
                            //宿舍管理员管理
                            //相应值
                            let a1, a3, a5; //第1 ，3 ，5项值 姓名 电话 用户名
                            a1 = thisChilds[2].innerText;
                            a3 = thisChilds[4].innerText;
                            a5 = thisChilds[6].innerText;
                            //当前行 下标 亦为 id
                            let trIndex = thisChilds[1].innerText;
                            // console.log(trIndex);

                            //将该行替换为可修改行
                            e.target.parentElement.parentElement.parentElement.innerHTML = `
                                <td><input class="checkbox-inline" type="checkbox" name="cb_select"></td>
                                <td></td>
                                <td><input class="form-control" type="text" name="username" value="${a1}" autofocus="autofocus"></td>
                                <td>
                                    <select class="form-control" name="gender" style="width: 70px;">
                                        <option value="0" selected="">女</option>
                                        <option value="1">男</option>
                                    </select>
                                </td>
                                <td><input class="form-control" type="phone" name="phone" value="${a3}"></td>
                                <td>
                                    <select name="dormId"  style="width: 130px;" class="form-control dormId_tr${trIndex}">
                                    
                                    </select>
                                </td>
                                <td><input class="form-control" type="text" name="account" value="${a5}"></td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" name="btn_save" class="btn btn-primary">保存</button>
                                        <button type="button" name="btn_cancel" class="btn btn-danger">取消</button>
                                    </div>
                                </td>
                            `;
                            //获取焦点
                            //调用宿舍楼选择项 渲染方法
                            fllTr(trIndex); //传入 class类名后缀；
                            //

                        } else if (pathname == '/stuManagement.html') {
                            //学生管理
                            //相应值
                            let a2, a4, a6; //第2 ，4 ，6 项值  姓名 电话  寝室
                            // a1 = thisChilds[2].innerText;//学号
                            a2 = thisChilds[3].innerText;//姓名
                            a4 = thisChilds[5].innerText;//电话
                            a6 = thisChilds[7].innerText;//寝室
                            //当前行 下标 亦为 id
                            let trIndex = thisChilds[1].innerText;
                            // console.log(trIndex);

                            //将该行替换为可修改行
                            e.target.parentElement.parentElement.parentElement.innerHTML = `
                                <td><input class="checkbox-inline" type="checkbox" name="cb_select"></td>
                                <td></td>
                                <td></td>
                                <td><input class="form-control" type="text" name="sname" value="${a2}" autofocus="autofocus"></td>
                                <td>
                                    <select class="form-control" name="gender" style="width: 70px;">
                                        <option value="0" selected="">女</option>
                                        <option value="1">男</option>
                                    </select>
                                </td>
                                <td><input class="form-control" type="phone" name="phone" value="${a4}"></td>
                                <td><select name="dormId" style="width: 130px;" class="form-control dormId_tr${trIndex}">
                                        
                                    </select></td>
                                <td><input class="form-control" type="text" name="roomId" value="${a6}"></td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" name="btn_save" class="btn btn-primary">保存</button>
                                        <button type="button" name="btn_cancel" class="btn btn-danger">取消</button>
                                    </div>
                                </td>
                            `;
                            //调用宿舍楼选择项 渲染方法
                            fllTr(trIndex); //传入 class类名后缀；
                            //

                        } else if (pathname == '/dormManagement.html') {
                            //宿舍楼管理
                            //相应值
                            let a1, a2; //第1 ，2 项值  名称 简介
                            a1 = thisChilds[2].innerText;//名称
                            a2 = thisChilds[3].innerText;//简介
                            //当前行 下标 亦为 id
                            // let trIndex = thisChilds[1].innerText;
                            // console.log(trIndex);

                            //将该行替换为可修改行
                            e.target.parentElement.parentElement.parentElement.innerHTML = `
                                <td><input class="checkbox-inline" type="checkbox" name="cb_select"></td>
                                <td></td>
                                <td><input class="form-control" type="text" name="name" value="${a1}" autofocus="autofocus"></td>
                                <td><input class="form-control" type="text" name="intro" value="${a2}"></td>
                                <td></td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" name="btn_save" class="btn btn-primary">保存</button>
                                        <button type="button" name="btn_cancel" class="btn btn-danger">取消</button>
                                    </div>
                                </td>
                            `;
                            //

                        } else if (pathname == '/absence.html') {
                            //缺勤记录
                            //无修改
                        }

                    }

                    //修改后 保存按钮
                    if (e.target.name == 'btn_save') {
                        //启用非 当前 修改按钮
                        for (const i of btn_edits) {
                            i.removeAttribute('disabled', 'disabled');
                        }

                        //保存操作

                        // location.reload();
                        load(data);//

                    }
                    //修改后 取消按钮
                    if (e.target.name == 'btn_cancel') {
                        //启用非 当前 修改按钮
                        for (const i of btn_edits) {
                            i.removeAttribute('disabled', 'disabled');
                        }
                        //取消操作

                        // location.reload();
                        load(data);//

                    }

                    //删除行操作
                    if (e.target.name == 'btn_del') {
                        //删除操作

                        e.target.parentElement.parentElement.parentElement.remove();

                    }
                    // console.log(e.target.parentElement.parentElement.parentElement);
                }
            });
        }

        //修改 行 宿舍楼 列表 选择项加载
        function fllTr(seleTr) {
            let floorList = document.querySelector('#tbody-list .dormId_tr' + seleTr + ''); //当前行所需加载
            // console.log(floorList);

            //清空重载
            floorList.innerHTML += `<option value="-1">请选择宿舍楼</option>`;
            //
            for (let index = 0; index < floor.length; index++) {
                floorList.innerHTML += `<option value="${index + 1}">${floor[index]}</option>`;
            }

        }
    }

    //
    dataOperation();//数据 增删改  dataOperation数据操作

    // } //getData(datajson);

    // getData(data)
    //
    ///////////////////////////////////////////////////////////////////////
    //数据查询
    //数据查询
    //数据查询
    // dataInquire()
    function dataInquire(data) {
        //当前页面location.pathname 地址
        let pathname = location.pathname;
        //
        let newData = data;
        //不同页面不同加载 搜索
        for (let ind = 0; ind < dataNum / 5; ind++) {
            if (pathname == '/dormAdminManager.html') {
                //宿舍管理员管理  搜索 
                //获取搜索框 各框
                let username = document.querySelector('.form-inline input[name="username"]');//姓名
                //过滤 采用层级过滤 根据每项有无值，有则过滤，无则跳过  所有项过滤后得到搜索目标值
                //姓名项
                if (username.value != '') {
                    //
                    newData.filter(function (value, index) {
                        if (value.username.indexOf(username.value) == -1) {
                            newData.splice(index, 1);   // remove
                        }
                    })
                }

                seaData(newData);

            } else if (pathname == '/stuManagement.html') {
                //学生管理 搜索
                //获取搜索框 各框
                let username = document.querySelector('.form-inline input[name="username"]');//姓名
                // console.log(username.value);
                //过滤 采用层级过滤 根据每项有无值，有则过滤，无则跳过  所有项过滤后得到搜索目标值
                //姓名项
                if (username.value != '') {
                    //
                    newData.filter(function (value, index) {
                        if (value.sname.indexOf(username.value) == -1) {
                            newData.splice(index, 1);   // remove
                        }
                    })

                }
                // console.log(data);
                seaData(newData);

            } else if (pathname == '/dormManagement.html') {
                //宿舍楼管理 搜索
                //获取搜索框 各框
                let username = document.querySelector('.form-inline input[name="name"]');//宿舍楼名称
                // console.log(username);
                if (username.value != '') {
                    //
                    newData.filter(function (value, index) {
                        // if (value.name != username.value) {
                        //     newData.splice(index, 1);
                        // }
                        if (value.name.indexOf(username.value) == -1) {
                            newData.splice(index, 1);   // remove
                        }
                    })
                    // console.log(newData);
                }

            } else if (pathname == '/absence.html') {
                //缺勤记录 搜索
                //获取搜索框 各框
                let username = document.querySelector('.form-inline input[name="sname"]');//姓名
                let startTime = document.querySelector('.form-inline input[name="startdate"]');
                // console.log(startTime);
                let endTime = document.querySelector('.form-inline input[name="enddate"]');
                // console.log(endTime.value>'2022-09-22 01:04:59');

                // console.log(username.value);
                //过滤 采用层级过滤 根据每项有无值，有则过滤，无则跳过  所有项过滤后得到搜索目标值
                //姓名项
                if (username.value != '') {
                    //
                    newData.filter(function (value, index) {
                        if (value.sname.indexOf(username.value) == -1) {
                            newData.splice(index, 1);   // remove
                        }
                    })
                    //createDate: "2021-05-19 01:04:59"
                }
                //开始时间
                if (startTime.value != '') {
                    newData.filter(function (value, index) {
                        if (value.createDate < startTime.value) {
                            newData.splice(index, 1);   // remove
                        }
                    })
                }
                //结束时间
                if (endTime.value != '') {
                    newData.filter(function (value, index) {
                        if (value.createDate > endTime.value) {
                            newData.splice(index, 1);   // remove
                        }
                    })
                }

                // console.log(newData);
            }

        }

        function seaData(newData) {
            let phone = document.querySelector('.form-inline input[name="phone"]');//手机号
            let gender = document.querySelector('.form-inline select[name="gender"]');//性别
            // console.log(gender.value); // -1选择提示  0女 1男
            let dormId = document.querySelector('.form-inline select[name="dormId"]');//宿舍楼
            // console.log(dormId.value);  // -1选择提示   1-n 表示 第n宿舍楼
            ////电话项
            if (phone.value != '') {
                //
                newData.filter(function (value, index) {
                    if (value.phone.indexOf(phone.value) == -1) {
                        newData.splice(index, 1);
                    }
                });
            }
            ////性别项
            if (gender.value != '' && gender.value != -1) {
                //
                newData.filter(function (value, index) {
                    if (value.gender != gender.value) {
                        newData.splice(index, 1);
                    }
                });
            }
            ////宿舍楼项
            if (dormId.value != '' && dormId.value != -1) {
                //
                newData.filter(function (value, index) {
                    if (value.dormId != dormId.value) {
                        newData.splice(index, 1);
                    }
                });
            }
        }



        // console.log(newData);
        return newData;
        // getData(newData);
    }


    // //搜索按钮
    // document.querySelector('#btn_search').addEventListener('click', function (e) {
    //     // //
    //     // let datas;
    //     // //
    //     // $.ajax({
    //     //     url: 'json/' + url + '.json',   //url  :请求地址 
    //     //     type: 'get',                        //type ：请求类型
    //     //     data: {},                        //data ：发送给服务器的数据
    //     //     async: false,
    //     //     dataType: 'json',                    //!--dataType:返回的数据类型
    //     //     success: function (datajson) {//<!--回调函数 -->      
    //     //         // 调用方法 传入数据 
    //     //         //getData(datajson);
    //     //         datas = datajson;
    //     //     }
    //     // });//$.ajax
    //     //调用搜索方法
    //     dataInquire(data);
    //     // getData(dataInquire());
    //     // console.log(dataInquire());

    // });

    // getData(dataInquire());
    // document.querySelector('#btn_search').click();


    // } //getData(datajson);

}); //window.addEventListener("DOMContentLoaded")

//数据
//dormAdminManager 宿舍管理员管理
//宿舍楼
let floor = [
    '第一宿舍楼',
    '第二宿舍楼',
    '第三宿舍楼',
    '第四宿舍楼',
    '第五宿舍楼',
    '第六宿舍楼',
];



